<template>
<div>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <Upload action="//jsonplaceholder.typicode.com/posts/">
      <Button icon="ios-cloud-upload-outline">Upload files</Button>
    </Upload>
    <Tabs value="name1">
      <TabPane label="标签一" name="name1">标签一的内容</TabPane>
      <TabPane label="标签二" name="name2">标签二的内容</TabPane>
      <TabPane label="标签三" name="name3">标签三的内容</TabPane>
    </Tabs>
    <p>Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.</p>
    <Divider />
    <p>Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.</p>
    <Divider>With Text</Divider>
    <p>Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.</p>
    <Divider dashed />
    <p>Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.</p>
    <div style="padding: 10px;background: #f8f8f9">
      <Card title="Options" icon="ios-options" :padding="0" shadow style="width: 300px;">
        <CellGroup>
          <Cell title="Only show titles" />
          <Cell title="Display label content" label="label content" />
          <Cell title="Display right content" extra="details" />
          <Cell title="Link" extra="details" to="/components/button" />
          <Cell title="Open link in new window" to="/components/button" target="_blank" />
          <Cell title="Disabled" disabled />
          <Cell title="Selected" selected />
          <Cell title="With Badge" to="/components/badge">
            <Badge :count="10" slot="extra" />
          </Cell>
          <Cell title="With Switch">
            <Switch v-model="switchValue" slot="extra" />
          </Cell>
        </CellGroup>
      </Card>
    </div>
  <div>
  <Circle :percent="80">
    <span class="demo-Circle-inner" style="font-size:24px">80%</span>
  </Circle>
  <Circle :percent="100" stroke-color="#5cb85c">
    <Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
  </Circle>
  <Circle :percent="35" stroke-color="#ff5500">
        <span class="demo-Circle-inner">
            <Icon type="ios-close" size="50" style="color:#ff5500"></Icon>
        </span>
  </Circle>
</div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
